<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue3.js"></script>
     <style>
         *{margin: 0;padding: 0;}
          ul,li{list-style: none;}
          .main{
             width: 1200px;
             margin: 0 auto;
          }
          td{
              text-align: center;
          }
          span{
              margin: 0 10px;
              text-align: center;
              color: red;
              text-decoration: underline;
          }
          span.edit{
              color: aqua;
          }
          .add{
              margin: 20px auto;
          }
          button{
              width: 100px;
              height: 30px;
          }
           table{
               width: 100%;
               border: 1px solid #ccc;
           }
           tr,td,th{
              border: 1px solid #ccc;
           }
     </style>
</head>
<body>

    <div id="app" class="main">
        <table cellpadding="0" cellspacing= "0">
            <thead>
                <tr>
                    <th></th>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="cartlist.length===0">
                <tr>
                    <td colspan="6">还没有选择商品，去购物</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr v-for="(item,index) in cartlist" :key="item.id">
                    <td><input type="checkbox" v-model="item.checkbox"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.count--" :disabled="item.count<=1">-</button>
                        {{item.count}}
                        <button @click="item.count++">+</button>
                    </td>
                    <td>
                        <span class="delete" @click="delEvent(index)">删除</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" @click="allSelEvent()"><input type="checkbox" v-model="allSel"></td>
                    <td colspan="2">总价</td>
                    <td colspan="3">{{totalPrice}}</td>
                </tr>
            </tbody>
           
        </table>            
    </div>     
    <script src="./table.js"></script>   
</body>
</html>
